<template>

	<view class="content" :style="$theme.pageStyle">

		<u-navbar :bgColor="bgColor">
			<template #left>
				<view class="u-nav-slot" style="display: flex;font-size: 14px;">
					<u-icon name="map" size="16"></u-icon>
					<span style="margin-right: 5px;margin-left: 3px;">
						<sh-address v-model:codeValue="valCode" v-model="val" @change="changeCity"
							@columnchange="columnchange">
							{{city}}
						</sh-address>
					</span>
					<u-icon name="arrow-down" size="12"></u-icon>
				</view>
			</template>
			<template #center>
				<view>{{app_title}}</view>
			</template>
		</u-navbar>

		<view class="customzw" :style="{ height: TopHeight + 'px'}">


		</view>
		<view class="m-slider">
			<view class="wrap">
				<u-swiper :list="isbanner" height="120" keyName="img" radius="8" indicator indicatorMode="line"
					circular></u-swiper>
			</view>
		</view>

		<!-- <view class="topbox">
			<view class="search">
				<view class="changelang" @click="showLangopen()">
					{{$t('change.语言')}}
				</view>
				<u-search placeholder="搜索律师" v-model="keyword" height="40" :clearabled="true" :showAction="true"
					actionText="搜索" :animation="true" @custom="custom"></u-search>
			</view>
		</view> -->
		<view class="tops_ask_column">
			<view class="top_icon">
				<image src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/3517130669957nGbvM.png" mode="">
				</image>
			</view>
			<view class="ask-column">
				<block v-for="(item, index) in cate" :key="index">
					<view class="item" @click="Tourl(item.url)">
						<view class="ico-tj" v-if="item.recommend == 1"></view>
						<image :src="item.img" mode="" class="ico-column ico-quickask-74"></image>
						<p class="ccc">{{item.title}}</p>
						<text>{{item.desc}}</text>
					</view>
				</block>
			</view>
			<view>
				<view class="scroll-view">
					<u-scroll-list @right="scrollviewright" @left="scrollviewleft" :indicatorActiveColor="$theme.navBgColor">
						<view class="scroll-list" style="flex-direction: row;">
							<view class="scroll-list__goods-item" v-for="(item, index) in navs" :key="index"
								:class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']"
								@click="Tourl(item.url)">
								<image class="scroll-list__goods-item__image" :src="item.images"></image>
								<text class="scroll-list__goods-item__text">{{item.name}}</text>
							</view>
							<view class="scroll-list__show-more">
								<text class="scroll-list__show-more__text">{{$t('change.查看更多')}} </text>
								<u-icon name="arrow-leftward" :color="$theme.navBgColor" size="12"></u-icon>
							</view>
						</view>
					</u-scroll-list>
				</view>
			</view>
		</view>
		<view class="tj_box">
			<view class="aui-image-text">
				<view class="aui-flex " @click="Tourl('/chat/gpt/index')">
					<view class="aui-flex-box">
						<h2 class="aui-flex-box-h2">智能律师团</h2>
						<p class="aui-flex-box-p">红包优惠不停</p>
						<span class="aui-flex-box-span">GO</span>
					</view>
					<view class="aui-shrink-img">
						<image src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/541695330594oR9KdV.png"
							mode=""></image>
					</view>
				</view>
				<view class="aui-flex aui-flex-two" @click="Tourl('/tools/billa/index')">
					<view class="aui-flex-box">
						<h2 class="aui-flex-box-h2">起诉状</h2>
						<p class="aui-flex-box-p">AI生成起诉状</p>
						<span class="aui-flex-box-span">GO</span>
					</view>
					<view class="aui-shrink-img">
						<image src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/121695330612zC44We.png"
							mode=""></image>
					</view>
				</view>
			</view>
		</view>

		<view class="mian_body">

			<view class="nav-tw-tit">
				<view class="bdlr-tit"></view>
				<view class="tit ect">{{city}}</view>
				<view class="tag">
					<view class="ico-bdlr"></view>
					您身边的好律师
				</view>
			</view>

			<view class="tab">
				<u-tabs :list="list1" @click="clickTab"></u-tabs>
			</view>
			
			<view class="lawyer_list" v-if="indexData == 0">
				<block v-for="(item , index ) in lawyer" :key="index">
					<view class="law_list recommend-conent" @click="Tourl('/pages/lawyer/info?id=' + item.id)">
						<view class="lawyer-list">
							<view class="lawyer home">
								<view class="lawyer-left">
									<view class="lawyer-left-info">
										<view class="lawyer-left-info-img">
											<image :src="item.avatar" mode=""></image>
										</view>
										<!-- <view class="lawyer-tag">
											<view class="lawyer-tag-val">
												金牌
											</view>
										</view> -->
									</view>
									<view class="inline-status" v-if="item.is_online == 1">
										<statusPoint type="success"></statusPoint>
										{{$t('change.在线')}}
									</view>
								</view>
								<view class="lawyer-right">
									<view class="lawyer-right-name">
										<view class="lawyer-right-name-left">
											{{item.real_name}}
										</view>
										<view class="lawyer-right-name-right l-color-theme"
											v-if="item.lawyer_auth_status == 2">
											{{$t('change.官方认证')}}
										</view>
									</view>
									<view class="lawyer-right-time">
										<view class="lawyer-right-time-left">
											{{$t('change.执业')}}{{item.year}}{{$t('change.年')}}
										</view>

										<view class="lawyer-right-time-left">
											{{$t('change.服务')}}{{item.fuwu}}{{$t('change.人')}}
										</view>

										<view class="lawyer-right-time-right">
											{{item.lawoffice}}
										</view>
									</view>

									<view class="lawyer-right-info">
										<view class="lawyer-right-info-item" v-for="(tag,tagindex) in item.like"
											:key="tagindex">
											{{tag}}
										</view>
									</view>

									<view class="lawyer-right-btn-position">
										<view class="lawyer-right-btn-right">
											<view class="lawyer-right-btn-right-info">
												{{$t('change.在线咨询')}}
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>


			</view>


			<view class="office_list" v-if="indexData == 1">
				<block v-for="(item , index) in office" :key="index">
					<view class="list acea-row row-between-wrapper"
						@click="Tourl('/lawyer/office/index?id=' + item.id)">
						<view class="left" style="width: 75%;">
							<view class="let">
								<image :src="item.logo" mode=""></image>
								<view class="cent">
									<view class="title u-line-2">
										{{item.name}}
									</view>
									<view class="address" style="display: flex;" v-if="item.is_auth == 1">

									</view>
								</view>
							</view>
							<view class="adress acea-row">
								<uni-icons type="location" color="#888" size="16"></uni-icons>
								<view class="con u-line-1" style="margin-left: 5px;">
									{{item.province}}{{item.city}}{{item.area}}{{item.address}}
								</view>
							</view>
							<view class="adress acea-row">
								<uni-icons type="calendar" color="#888" size="16"></uni-icons>
								<view class="con" style="margin-left: 5px;">
									{{$t('change.工作时间')}}：{{item.day_start}} - {{item.day_end}}
								</view>
							</view>
						</view>
						<view class="right" style="width:25%;">
							<view class="distance">
								{{item.lawyer_num}} {{$t('change.位律师入驻')}}
							</view>
							<view class="telephone" style="margin-top: 35px;">
								<view class="phone" @click="makecall(item.mobile)">
									<uni-icons type="phone-filled" color="#E0A558" size="25"></uni-icons>
								</view>
								<view class="phone" @click="openMap(item)">
									<uni-icons type="location-filled" color="#E0A558" size="25"></uni-icons>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>


		</view>


		<view class="ask_box" v-if="miniapp_audit != 1">
			<view class="title">优质问答</view>
			<block v-for="(item , index) in AskData" :key="index">
				<view class="qa_media_card bdb1" @click="Tourl('/chat/ask/detail?id=' + item.id )">
					<view>
						<view class="que nowrap-n">
							{{item.title}}
						</view>
						<view class="content">
							<view class="ans nowrap-n">
								{{item.answer}}
							</view>
							<view class="ans_msg">
								<view class="lawyer_img">
									<image :src="item.avatar" />
								</view>
								<span class="lawyer_name nowrap">{{item.real_name}} 律师</span>
								<view class="num read-number">{{item.view}}人看过</view>
							</view>
						</view>
					</view>
				</view>
				<view class="cb-present-cell flex wl-a-c">
					<view class="cb-user-cell">
						<image src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/491713116449wBXVhX.jpg"
							mode="" class="cb-lawer-img3"></image>
						<image src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/571713116457sNT216.jpg"
							mode="" class="cb-lawer-img3"></image>
						<image src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/031713116463IMEAQd.jpg"
							mode="" class="cb-lawer-img3"></image>
					</view>
					<p class="cb-present-nums">
						<span class="cb-present-num">{{randomNumber}}</span>
						人咨询过
					</p>
					<view class="cb-present-btn flex wl-a-c wl-j-c"
						@click="Tourl('/pages/lawyer/info?id=' + item.lawyer_id )">
						去咨询
					</view>
				</view>
			</block>
		</view>

		<view class="article_box" v-if="miniapp_audit != 1">
			<view class="article_item">
				<view class="title">优质文章</view>
				<view style="font-size: 12px;color: #666;" @click="Tourl('/article/index/index')">查看更多 <uni-icons type="right" size="12"></uni-icons></view>
			</view>
			<block v-for="(item,index) in Article" :key="index">
				<view class="articles-item" @click="Tourl('/article/index/detail?id=' + item.id )">
					<view class="essay-item">
						<view class="title van-ellipsis">
							{{item.title}}
						</view>
						<view class="essay-item-container flex">
							<view class="content flex-1">
								<view class="">
									<view class="detail text-ellipsis-2">
										{{item.abstract}}
									</view>
								</view>
								<view class="info flex flex-space-between flex-align-center">
									<view class="flex flex-1">
										<view class="tag">
											# {{item.category.name}}
										</view>
										<view class="number-of-read flex flex-align-center">
											<p class="text">{{item.click_actual}}浏览</p>
										</view>
									</view>
									<p class="date">{{item.create_time}}</p>
								</view>
							</view>
							<view>
								<image class="logo" :src="item.images" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</block>

		</view>

		<!-- 多语言 -->
		<!-- <u-popup :show="showLang" mode="center" :round="15" @close="showLangclose" @open="showLangopen">
			<view class="Langchange">
				<view class="lang" style="margin-bottom: 10px;" @click="ChangeCN()">中文</view>
				<view class="lang" @click="ChangeUyghur()">维语</view>
			</view>
		</u-popup> -->
		
		<view class="shangbiaozhuche">
			<button class="viewbox" open-type="contact">
				<image :src="CustomerHeadimg" mode=""></image>
			</button>
		</view>
		<view style="height: 50px;">
		</view>
		<login :loginPopupShow='loginPop' @close="closeLoginPopup" />
		<tabbar />
		
	</view>
</template>


<script>
	import statusPoint from '@/components/status.vue'
	export default {
		components: {
			statusPoint
		},
		data() {
			return {
				loginPop: false,
				showLang: false,
				app_title: uni.getStorageSync('app_name'),
				TopHeight: uni.getStorageSync('TopHeight'),
				CustomerHeadimg: uni.getStorageSync('default_customer_headimg'),
				miniapp_audit: uni.getStorageSync('miniapp_audit'),
				bgColor: '#f8f8f8',
				isLogin: '',
				scrollTop: 0,
				indexData: 0,
				isbanner: [],
				keyword: "",
				city: uni.getStorageSync('city'),
				navs: [],
				cate: [],
				lawyer: [],
				office: [],
				AskData: [],
				Article: [],
				valCode: ["36", "3601", "360111"],
				val: ["江西省", "南昌市", "青山湖区"],
				addressInfo: '',
				randomNumber: this.round(),
				list1: [{
					name: '推荐律师',
				}, {
					name: '找律所',
				}],
			}
		},
		onLoad(opt) {
			if (opt.scene) {
				uni.setStorageSync('invite_code', opt.scene)
			}
			this.getData()
			if (uni.getStorageSync('token') == '') {
				this.isLogin = 0
			} else {
				this.isLogin = 1
			}
			if (uni.getStorageSync('city') == '') {
				this.getCity()
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			closeLoginPopup(){
				this.loginPop = false
			},
			columnchange(e) {
				console.log(e)
			},
			round() {
				return String(Math.floor(Math.random() * 10000)).padStart(4, '0');
			},
			changeCity(e) {
				console.log(e)
				this.city = e.city
				this.province = e.province
				uni.setStorageSync('city', e.city)
				uni.setStorageSync('province', e.province)
				if(this.isLogin == 1){
					
				}
			},
			UpDataUCity(){
				
			},
			ChangeCN() {
				this.$i18n.locale = 'zh-Hans';
				uni.setStorageSync('lang', this.$i18n.locale)
				uni.setLocale(this.$i18n.locale);
				this.showLang = false
				//
				this.changeTab()
			},
			ChangeUyghur() {
				this.$i18n.locale = 'zh-Uyghur';
				uni.setStorageSync('lang', this.$i18n.locale)
				uni.setLocale(this.$i18n.locale);
				this.showLang = false
				this.changeTab()
				this.font()
			},
			changeTab() {
				uni.setTabBarItem({
					index: 0,
					text: this.$t('change.首页')
				})
				uni.setTabBarItem({
					index: 1,
					text: this.$t('change.服务')
				})
				uni.setTabBarItem({
					index: 2,
					text: this.$t('change.消息')
				})
				uni.setTabBarItem({
					index: 3,
					text: this.$t('change.我的')
				})
			},
			getCity() {
				this.$api.HomeApi.city().then(res => {
					if (res.code == 1) {
						this.city = res.data.city.city
						this.province = res.data.city.prov
						uni.setStorageSync('city', res.data.city.city)
						uni.setStorageSync('province', res.data.city.prov)
					}
				})
			},
			getData() {
				this.$api.HomeApi.index().then(res => {
					if (res.code == 1) {
						this.navs = res.data.navs
						this.cate = res.data.cate
						this.lawyer = res.data.lawyer
						this.office = res.data.office
						this.isbanner = res.data.banenr
						this.AskData = res.data.ask
						this.Article = res.data.article
					}
				})
			},
			clickTab(item) {
				if (item.index == 1) {
					this.indexData = 1
				}
				if (item.index == 0) {
					this.indexData = 0
				}
			},
			Tourl(url) {
				//判断是否登录
				// if (this.isLogin == 0) {
				// 	return uni.navigateTo({
				// 		url: '/pages/login/login'
				// 	})
				// }
				uni.navigateTo({
					url: url
				})
			},
			scrollviewleft() {
				console.log('left');
			},
			scrollviewright() {
				console.log('right');
			},
			showLangopen() {
				// console.log('open');
				this.showLang = true
			},
			showLangclose() {
				this.showLang = false
				// console.log('close');
			},
			openMap(data) {
				uni.openLocation({
					latitude: parseFloat(data.latitude),
					longitude: parseFloat(data.longitude),
					name: data.name,
					address: data.address,
					scale: 18
				})
			},
			custom(value) {
				uni.navigateTo({
					url: '/pages/index/search?keyword=' + value
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/common/css/lawyer.scss';

	.intab {
		margin: 10px;
		padding-bottom: 10px;
		border-radius: 10px;
		background: #fff;
	}

	.Langchange {
		padding: 25px;

		.lang {
			width: 200px;
			height: 45px;
			line-height: 45px;
			text-align: center;
			background-color: #699af8;
			color: #fff;
			border-radius: 8px;
		}
	}


	.m-slider {
		background: #fff;
		margin: 10px;
		border-radius: 8px;
		border-radius: 8px;
	}

	.search {
		padding: 10px;
		display: flex;

		.changelang {
			line-height: 42px;
			margin-right: 10px;
			background: #699af8;
			color: #fff;
			border-radius: 8px;
			padding: 0px 5px 0px 5px;
		}
	}

	.topbox {
		height: 70px;
		width: 100%;
		// border-radius: 20px 20px 0px 0px;
		background-color: #FFFFFF;
		// margin-top: -20px;
		// z-index: 99;
		position: relative;
		display: inline-block;
	}

	.daotu {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 100px;
		position: relative;
		padding: 0px 10px 0px 10px;
	}


	.tops_ask_column {
		background: #fff;
		margin: 10px;
		border-radius: 8px;

		.top_icon {
			image {
				display: block;
				margin: 0 auto;
				width: 100%;
				height: 45px;
			}
		}
	}

	.ask-column {
		display: flex;
		padding: 1rem 0.3rem 0.5rem;
	}

	.ask-column .item {
		position: relative;
		flex: 1;
		text-align: center;
	}

	.ask-column .item .ico-tj {
		position: absolute;
		top: -0.4rem;
		left: 50%;
		margin-left: 1rem;
		animation: homeLabelScale 5s linear infinite;
	}

	@keyframes homeLabelScale {
		0% {
			transform: scale(1);
		}

		66% {
			transform: scale(1);
		}

		70% {
			transform: scale(0);
		}

		74% {
			transform: scale(0);
		}

		78% {
			transform: scale(1);
		}

		100% {
			transform: scale(1);
		}
	}

	.ico-quickask-74 {
		width: 140rpx;
		height: 140rpx;
		background-position: 0 0;
	}

	.ico-column {
		display: inline-block;
		vertical-align: middle;
		// background: url("http://tuchuangwng.oss-cn-beijing.aliyuncs.com/2021/11/03/56441697ddd43.png") no-repeat;
		background-size: 100% 100%;
	}

	.ask-column .item .ccc {
		font-size: 17px;
		font-weight: 700;
		padding-top: 5px;
	}

	.ask-column .item text {
		font-size: 12px;
		line-height: .8rem;
		color: #999;
		margin-top: 0.4rem;
	}

	.ico-tj {
		display: inline-block;
		vertical-align: middle;
		z-index: 1;
		width: 34px;
		height: 20px;
		background: url('http://tuchuangwng.oss-cn-beijing.aliyuncs.com/2021/11/03/e69cc9343f8cc.png') no-repeat;
		background-size: 100% 100%;
	}

	.tj_box {
		height: 100%;
		display: flex;
		flex-direction: column;
		background: #fff;
		margin: 10px;
		border-radius: 8px;
		padding: 10px;

		.aui-image-text {
			position: relative;
			overflow: hidden;
			display: flex;
			justify-content: space-between;

			.aui-flex {
				border-radius: 8px;
				width: 49%;
				float: left;
				background-color: #efeff7;
				background: -webkit-linear-gradient(left, #efeff7, #f3f4f9);
				background: -o-linear-gradient(right, #efeff7, #f3f4f9);
				background: -moz-linear-gradient(right, #efeff7, #f3f4f9);
				background: linear-gradient(to right, #efeff7, #f3f4f9);
			}

			.aui-flex-two {
				background-color: #f7f4ed;
				background: -webkit-linear-gradient(left, #f7f4ed, #f9f8f4);
				background: -o-linear-gradient(right, #f7f4ed, #f9f8f4);
				background: -moz-linear-gradient(right, #f7f4ed, #f9f8f4);
				background: linear-gradient(to right, #f7f4ed, #f9f8f4);
			}

			.aui-flex-box {
				-webkit-box-flex: 1;
				-webkit-flex: 1;
				flex: 1;
				min-width: 0;
				font-size: 14px;
				color: #333;
			}

			.aui-flex-box-h2 {
				font-weight: 500;
				font-size: 1rem;
				color: #343434;
				z-index: 3;
				position: relative;
				text-align: left;
				margin-bottom: 0.2rem;
			}

			.aui-flex-box-p {
				font-weight: normal;
				font-size: 0.7rem;
				height: 1.5rem;
				color: #888888;
				margin-bottom: 0.3rem;
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				word-break: break-all;
				text-overflow: ellipsis;
				text-align: justify;
			}

			.aui-flex-box-span {
				background: #fefefe;
				color: #333;
				border-radius: 22px;
				padding: 0.1rem 0.5rem;
			}

			.aui-shrink-img {
				width: 65px;
				position: absolute;
				right: 0;
				bottom: 0;
			}

			.aui-shrink-img image {
				width: 65px;
				height: 68px;
				border: none;
				display: block;
				border-radius: 3px;
			}

		}
	}


	.aui-flex {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		padding: 15px;
		position: relative;
	}

	.scroll-view {
		margin: 10px;
		background: #fff;
		border-radius: 10px;
	}

	.scroll-list {
		@include flex(column);

		&__goods-item {
			// margin-right: 15px;
			width: 78px;

			&__image {
				width: 35px;
				height: 35px;
				border-radius: 4px;
				margin: 0 auto;
				display: flex;
				align-items: center;
			}

			&__text {
				color: #666;
				font-size: 14px;
				margin-top: 5px;
				font-weight: 400;
				display: flex;
				justify-content: center;
			}
		}

		&__show-more {
			background-color: #fff0f0;
			border-radius: 3px;
			padding: 3px 6px;
			@include flex(column);
			align-items: center;

			&__text {
				font-size: 12px;
				width: 12px;
				color: var(--color-primary);
				line-height: 16px;
			}
		}
	}

	.mian_body {
		margin: 10px;
		padding-bottom: 10px;
		border-radius: 10px;
		background: #fff;

		.nav-tw-tit {
			height: 2.8rem;
			padding: 1rem .6rem;
			line-height: .9rem;
			background: url('https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/181713067398MiK41a.png') no-repeat;
			background-size: 100% auto;

			.bdlr-tit {
				float: left;
				width: 4.85rem;
				height: .8rem;
				margin: 0 .3rem 0 0;
				background: url('https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/291713067469KmlR8Y.png') no-repeat;
				background-size: 100% auto;
			}

			.tit {
				float: left;
				margin-right: .4rem;
				max-width: 4.8rem;
			}

			.ect {
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}


			.tag {
				float: left;
				padding: 0 .4rem;
				height: .9rem;
				line-height: .9rem;
				background: linear-gradient(270deg, #EDF3FC 0%, #EDF3FC 100%);
				border-radius: .55rem;
				font-size: .6rem;
				color: #868EA3;

				.ico-bdlr {
					float: left;
					width: .7rem;
					height: .7rem;
					margin: .1rem .1rem 0 0;
					background: url('https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/291713067649hTtwVx.png') no-repeat;
					background-size: cover;
				}
			}
		}
	}

	.rights {
		display: flex;

		.items {
			margin-top: 12.5px;
			height: 25px;
			width: 90px;
			background: var(--color-primary);
			border-radius: 5px;
			color: #fff;
			margin-right: 10px;
			font-size: 14px;
			line-height: 25px;
			margin-bottom: 10px;
		}
	}


	.let {
		display: flex;

		image {
			height: 60px;
			width: 60px;
			border-radius: 5px;
		}

		.cent {
			margin-left: 10px;

			.title {
				line-height: 30px;
				font-size: 16px;
				font-weight: 600;
			}


			.address {
				line-height: 15px;
				font-size: 12px;
				font-weight: 400;
			}

			.time {
				line-height: 15px;
				font-size: 12px;
			}
		}
	}


	.office_list {
		// margin: 15px;
	}

	.office_list .list {
		display: flex;
		justify-content: space-between;
		margin-top: 11px;
		background: #fff;
		border-radius: 6px;
		padding: 10px;
		border: 1px solid #fff;
		overflow: hidden;
		border-radius: 14px;
		box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.05);
		transition: 0.3s all cubic-bezier(0, 1, 0.95, 1.05);
	}

	.office_list .list .left {
		// border-right: 1px solid #eee;
		// padding-right: 5px;
	}

	.office_list .list .left .name {
		font-size: 15px;
		font-weight: 500;
		color: #333;
	}

	.line2 {
		word-break: break-all;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.office_list .list .left .adress {
		margin-top: 9px;
		word-wrap: break-word;
		font-size: 12px;
		font-weight: 400;
		color: #888;
	}


	.acea-row {
		display: -webkit-box;
		display: -moz-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-lines: multiple;
		-moz-box-lines: multiple;
		-o-box-lines: multiple;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.office_list .list .left .adress .con {
		width: 198px;
	}

	.office_list .list .right .gostore {
		font-size: 12px;
		font-weight: 400;
		color: #E0A558;
	}

	.office_list .list .right .distance {
		margin-top: 7px;
		font-size: 11px;
		font-weight: 400;
		color: #999;
	}

	.office_list .list .right .telephone {
		margin-top: 7px;
		display: flex;
		justify-content: space-between;
	}

	.office_list .list .right .telephone .phone {
		position: relative;
		margin-right: 13px;
		width: 30px;
		height: 30px;
		background: rgba(224, 165, 88, 0.1);
		border-radius: 50%;
		text-align: center;
		line-height: 30px;
		z-index: 10;
	}


	.inner-box {
		width: 100%;
		height: 420rpx;
		background-color: #fff;
		padding: 20rpx;
		border-bottom-left-radius: 24rpx;
		border-bottom-right-radius: 24rpx;
	}

	.ask_box {
		padding: 10px;
		margin: 10px;
		background: #fff;
		box-shadow: 0 0.16rem 0.48rem 0 rgba(51, 51, 63, .03);
		border-radius: 8px;

		// background: linear-gradient(180deg, #dfebff 0%, rgba(255, 255, 255, 0) 2rem);
		.title {
			font-size: 18px;
			font-weight: bold;
		}
	}


	.article_box {
		padding: 10px;
		margin: 10px;
		background: #fff;
		box-shadow: 0 0.16rem 0.48rem 0 rgba(51, 51, 63, .03);
		border-radius: 8px;

		// background: linear-gradient(180deg, #dfebff 0%, rgba(255, 255, 255, 0) 2rem);
		.article_item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.title {
				font-size: 18px;
				font-weight: bold;
			}
		}

	}



	.qa_media_card {
		padding: 20px 0 20px;
		margin: 0 10px;
	}

	.qa_media_card .que {
		padding-left: 40px;
		font-size: 16px;
		font-weight: 600;
		line-height: 20px;
		color: #111;
		background: url('https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/2017130888200IBHqZ.png') left 5px top 0px no-repeat;
		background-size: 20px 20px;
		margin-bottom: 15px
	}

	.nowrap-n {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		-webkit-line-clamp: 2;
	}



	.qa_media_card .content {
		border-radius: 8px;
		background: #f5f6f8;
		padding: 15px 0 10px
	}

	.qa_media_card .ans {
		padding-left: 40px;
		font-size: 16px;
		font-weight: 400;
		line-height: 20px;
		color: #666;
		background: url('https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/301713089490NRNG6v.png') left 5px top 0px no-repeat;
		background-size: 20px 20px;
		margin-bottom: 15px
	}

	.qa_media_card .ans_msg {
		display: flex;
		align-items: center;
		// padding: 0 15px 0 10px
	}

	.qa_media_card .lawyer_img {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		margin-right: 10px;
		margin-left: 5px;

		image {
			width: 20px;
			height: 20px;
			border-radius: 50%;
		}
	}

	.qa_media_card .lawyer_name {
		flex: 1;
		overflow: hidden;
		font-size: 14px;
		font-weight: 400;
		color: #111;
		height: 16px;
		line-height: 16px;
	}

	.qa_media_card .num {
		font-size: 12px;
		font-weight: 400;
		color: #999;
		height: 16px;
		line-height: 16px;
		margin-right: 5px;
	}


	.cb-present-cell {
		height: 27px;
		padding-left: 0;
	}

	.cb-present-cell {
		font-size: 12px;
		font-weight: 400;
		color: rgba(66, 44, 17, .6);
		position: relative;
		// padding-left: 32px;
		box-sizing: border-box;
	}

	.wl-a-c {
		align-items: center;
	}

	.cb-user-cell {
		margin-top: -.10667rem;
		margin-left: 10px;
	}

	.cb-user-cell {
		display: inline-block;
		position: relative;
		width: 45px;
		height: 15px;
	}

	.cb-lawer-img3 {
		width: 15px;
		height: 15px;
		position: relative;
		border-radius: 50%;
		bottom: -.02667rem;
		box-sizing: border-box;
		border: .02667rem solid #fff;
	}

	.cb-user-cell image {
		width: 15px;
		height: 15px;
		border-radius: 50%;
		margin-right: -5px;
	}

	.cb-present-nums {
		color: #666;
		font-size: 14px;
	}

	.cb-present-num {
		color: var(--color-primary);
		font-size: 14px;
		margin-left: 5px;
	}


	.cb-present-btn {
		position: absolute;
		right: 0;
		width: 65px;
		height: 30px;
		border-radius: 25px;
		text-align: center;
		line-height: 55px;
		font-size: 14px;
		font-weight: 600;
		color: var(--color-primary);
		border: 1px solid var(--color-primary);
		box-sizing: border-box;
	}

	.wl-a-c {
		align-items: center;
	}

	.wl-j-c {
		justify-content: center;
	}

	.flex {
		display: flex;
	}


	//文章列表
	.articles-item {
		width: 100%;
		margin: 10px auto 0;
		overflow: hidden;
		padding-bottom: 10px;
		// border-bottom: 1px #f1f1f1 solid;
	}

	.essay-item {
		background: #fff;
		padding: 5px 5px 0;
	}

	.essay-item .title {
		font-size: 18px;
		font-weight: 500;
		color: #333;
	}

	.van-ellipsis {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.essay-item-container {
		padding: 5px 0;
	}

	.essay-item .essay-item-container .content {
		overflow: hidden;
	}

	.flex-1 {
		flex: 1;
	}

	.essay-item .essay-item-container .content .detail {
		margin-bottom: 10px;
		font-size: 14px;
		font-weight: 400;
		color: #666;
		height: 40px;
	}

	.text-ellipsis-2 {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		word-wrap: break-word;
		word-break: break-all;
	}

	.flex-align-center {
		align-items: center;
	}

	.flex-space-between {
		justify-content: space-between;
	}

	.essay-item .essay-item-container .content .info .tag {
		font-size: 14px;
		font-weight: 400;
		color: var(--color-primary);
	}

	.essay-item .essay-item-container .content .info .number-of-read {
		padding-left: 10px;
	}

	.essay-item .essay-item-container .content .info .number-of-read .text {
		font-size: 14px;
		font-weight: 400;
		color: #999;
	}

	.essay-item .essay-item-container .content .info .date {
		font-size: 14px;
		line-height: 16px;
		font-weight: 400;
		color: #999;
	}

	.essay-item .essay-item-container .logo {
		width: 100px;
		height: 60px;
		border-radius: 8px;
		overflow: hidden;
		display: block;
		margin-left: 14px;
	}
	
	.shangbiaozhuche {
		width: 70px;
		height: 80px;
		right: 15px;
		bottom: 100px;
		position: fixed;
		z-index: 999;
	}
	
	.viewbox image {
		width: 40px;
		height: 40px;
		background: #fff;
	}
	
	
	button {
		border: 0;
		background-color: transparent;
		outline: none;
		line-height: normal;
		margin: 0;
		padding: 0;
	}
	
	button::after {
		border: none;
		width: 0;
		height: 0;
	}
	
</style>